<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <!-- 热门城市 -->
      <div class="hot-container">
        <h2 class="hot-title">热门城市</h2>
        <ul class="hot-list">
          <li
            class="hot-item"
            v-for="item in hotList"
            :key="item.id"
            @click="change(item.name)"
          >{{item.name}}</li>
        </ul>
      </div>
      <!-- 字母排序 -->
      <div class="sort-container">
        <h2 class="sort-title">字母排序</h2>
        <ul class="sort-list">
          <li
            class="sort-item"
            v-for="item in sortList"
            :key="item.id"
            @click="scrollToCities(item)"
          >{{item}}</li>
        </ul>
      </div>
      <!-- 城市列表 -->
      <div class="list-container">
        <div v-for="(val,key) in listList" :key="key" :ref="key">
          <h2 class="list-title">{{key}}</h2>
          <ul class="list-list">
            <li
              class="list-item"
              v-for="item in val"
              :key="item.id"
              @click="change(item.name)"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapActions } from "vuex";
export default {
  components: {},
  props: { listList: Object, sortList: Array, hotList: Array },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    ...mapActions(["changeCity"]),
    scrollToCities(key) {
      this.scroll.scrollToElement(this.$refs[key][0]);
    },
    change(name) {
      console.log("!");
      this.$router.push("./");
      this.changeCity(name);
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        mouseWheel: true,
        click: true,
        tap: true
      });
      console.log(this.scroll);
    });
  }
};
</script>
<style lang="stylus" scoped>
@import '~css/var.styl'

.wrapper
  background #f5f5f5
  position absolute
  overflow hidden
  right 0
  left 0
  bottom 0
  top 0.88rem

.sort-container
  font-size 0.3rem

.sort-title
  margin 0.2rem 0.3rem
  font-size 0.24rem

.sort-list
  display flex
  flex-wrap wrap
  background #ffffff

.sort-item
  flex 1
  min-width 16.66%
  max-width 16.66%
  text-align center
  line-height 0.8rem
  color #212121
  position relative

.hot-container
  font-size 0.3rem

.hot-title
  padding 0.2rem 0.3rem
  font-size 0.24rem

.hot-list
  display flex
  flex-wrap wrap
  background #ffffff
  overflow hidden

.hot-item
  flex 1
  min-width 33.33%
  text-align center
  line-height 0.8rem
  color #212121
  border-bottom 0.02rem solid #ddd
  margin-bottom -1px
  position relative

.hot-item:before
  content ' '
  width 1px
  height 100%
  position absolute
  right 0
  border-right 0.02rem solid #ddd

.list-container
  font-size 0.3rem

.list-title
  padding 0.2rem 0.3rem
  font-size 0.24rem

.list-list
  display flex
  flex-wrap wrap
  background #ffffff
  position relative
  overflow hidden

.list-list:before
  content ' '
  width 25%
  height 100%
  position absolute
  left 25%
  border-right 0.02rem solid #ddd
  border-left 0.02rem solid #ddd

.list-list:after
  content ' '
  width 25%
  height 100%
  position absolute
  left 75%
  border-left 0.02rem solid #ddd

.list-item
  flex 1
  z-index 2
  position relative
  min-width 25%
  max-width 25%
  text-align center
  line-height 0.8rem
  color #212121
  margin-bottom -1px
  border-bottom 0.02rem solid #ddd
  textOverflow()
</style>


